<template>
  <!-- 首页 -->
  <div class="index_box">
    <div :class="{'enter': true, phone_enter: isPhone}">
      <ul class="help_box">
        <li v-for="item, index in topFuncArr" :key="index" @click="handleTopFunc(item)">
          <img :src="item.url" alt="">
          <span>{{item.name}}</span>
        </li>
      </ul>
      <div class="title">联信UMRTC</div>
      <ul class="metting_type_box">
        <li
          :class="{'active': meetingIndex==index}"
           v-for="item, index in meetingTypeArr"
          :key="index"
          @click="chooseMeetingType(item.type, index)"
        >{{item.val}}</li>
      </ul>
      <div class="input_box">
        <div>
          <span>房间号：</span>
          <input type="text" @input="resetShareUrl" v-model="roomname" placeholder="请输入会议房间号" />
        </div>
        <div>
          <span>密码：</span>
          <input type="password" class="pwd_input" @input="resetShareUrl" v-model="roompwd" placeholder="请输入会议密码" />
          <el-tooltip v-if="!isPhone" class="item" effect="dark" content="快速生成会议房间" placement="top">
            <img src="../../assets/img/fast_generation.png" alt="" @click="creMeetingRoom" />
          </el-tooltip>
          <img v-if="isPhone" src="../../assets/img/fast_generation.png" alt="" @click="creMeetingRoom" />
        </div>
      </div>
      <div class="join_box">
        <button class="join_btn" @click="joinMeeting">创建会议</button>
      </div>
      <div class="create_box">
        <span class="cre_span" @click="creShareUrl">查看会议分享链接</span>
      </div>
      <mask-slot
        @closeMask="maskStatus=false"
        v-show="maskStatus"
      >
        <div class="mask_slot_box">
          <span class="slot_title">会议设置</span>
          <div class="radioBox definition" v-show="meetingType=='video'">
            <span>清晰度：</span>
            <el-radio-group v-model="videoBitObj.value">
              <el-radio :label="item.bit" v-for="item in videoBitObj.arr" :key="item.name">{{item.name}}</el-radio>
            </el-radio-group>
          </div>
          <div class="radioBox definition">
            <span>网络模式：</span>
            <el-radio-group v-if="!isPhone" v-model="connectTypeObj.value">
              <div v-for="item in connectTypeObj.arr" :key="item.value">
                <el-radio :label="item.value">{{item.name}}</el-radio>
              </div>
            </el-radio-group>
            <el-radio-group v-if="isPhone" v-model="connectTypeObj.value">
              <el-radio v-for="item in connectTypeObj.arr" :key="item.value" :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
          </div>
          <div class="mask_slot_btnbox">
            <!-- <div class="p_btn p_btn_cancle" @click="maskStatus=false">取消</div> -->
            <div class="p_btn p_btn_sure" @click="defineSetting">确定</div>
          </div>
        </div>
      </mask-slot>
      <mask-slot
        @closeMask="shareStatus=false"
        v-show="shareStatus"
      >
        <share-url
          :tokenModel='tokenModel'
          :roompwd='roompwd'
          :pwdJoinModel='pwdJoinModel'
        ></share-url>
      </mask-slot>
      <div class="default_url_box">
        <vue-qr :text='defaultUrl' :size='150'></vue-qr>
        <a :href="defaultUrl" target="_blank" rel="noopener norefferrer" class="btm_url">{{defaultUrl}}</a>
      </div>
    </div>
    <div :class="{'btm_tip':true, phone_btn_tip:isPhone}">做世界最小最简便的视频服务器！</div>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
import shareUrl from './shareUrl/index.vue'
import maskSlot from '../../components/common/mask.vue'

export default {
  name: "roomindex",
  data() {
    return {
      meetingType: this.$route.query.t || 'video',
      videoBitObj: {
        value: 240,
        arr: [
          { name: '流畅', bit: 240 },
          { name: '标清', bit: 480 },
          { name: '高清', bit: 720 }
        ]
      },
      connectTypeObj: {
        value: 'sfufirst',
        arr: [
          { name: 'SFU优先', value: 'sfufirst' },
          { name: '仅SFU', value: 'sfu' },
          { name: 'P2P优先', value: 'p2pfirst' },
          { name: '仅P2P', value: 'p2p' }
        ]
      },
      defaultUrl: window.location.href,
      helpCenter: location.origin + '/video2/docs',
      roomname: this.$store.state.functionMap.roomname || this.$route.query.roomid || '',
      roompwd: this.$store.state.functionMap.roompwd,
      shareStatus: false,
      tokenModel: '',
      pwdJoinModel: '',
      h: this.$route.query.h || '',
      n: this.$route.query.n,
      resetShareStatus: false,
      connectType: '',
      isPhone: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
      topFuncArr: [
        { url: require('../../assets/img/help.png'), name: '开发SDK', funcname: 'developmentHelp' },
        { url: require('../../assets/img/setting.png'), name: '会议设置', funcname: 'meetingSetting' }
      ],
      meetingTypeArr: [
        { val: '视频会议', type: 'video' },
        { val: '语音会议', type: 'audio' },
        { val: '视频直播', type: 'live' }
      ],
      meetingIndex: 0,
      maskStatus: false
    }
  },

  components: {
    vueQr,
    shareUrl,
    maskSlot
  },

  created() {
    this.handleWXShare()
    this.h && this.$store.commit('setMeetingID', this.h)
    this.$store.commit('setMeetingType', this.meetingType)
    this.h && this.joinMeeting(this.h)
    this.resetShareStatus = this.$store.state.functionMap.roomname && this.$store.state.functionMap.roompwd
  },

  mounted() {},

  methods: {
    handleTopFunc (val) {
      this[val.funcname]()
    },
    /** 开发SDK */
    developmentHelp () {
      window.open(this.helpCenter)
    },
    /** 会议设置 */
    meetingSetting () {
      this.maskStatus = true
    },
    /** 会议设置---确定 */
    defineSetting () {
      this.maskStatus = false
      this.resetShareStatus = true
    },
    /** 处理微信分享 */
    handleWXShare () {
      if (this.$store.state.functionMap.isWx) {
        this.$WXShare({
          title: '联信UMRTC会议系统',
          desc: '做世界最小最简便的视频服务器，整个系统小巧、灵活，主程序1M,运行内存4-5M,基于联信UmNode运行Lua语言执行，堪称世界最小最简便的视频服务器，让每位可以轻松搭建自己的WebRTC视频服务系统，也可简单嵌入自己的项目、软件中增加视频对话、视频会议服务。',
          link: location.href,
          imgUrl: location.origin + '/static/img/um.png'
        })
      }
    },
    /** 加入会议 */
    joinMeeting () {
      if ((this.roomname == '' || this.roompwd == '') && !this.h) {
        this.$notify.error({
          title: '提示',
          message: '请输入会议房间号或会议密码！'
        })
        return false
      }
      this.$store.commit('setRoomname', this.roomname)
      this.$store.commit('setRoomPwd', this.roompwd)
      this.h = this.h || this.$Creid(this.roomname, this.roompwd)
      this.$store.commit('setMeetingID', this.h)
      this.$router.push({
        name: `${this.meetingType}meeting`,
        query: {
          h: this.h,
          t: this.meetingType,
          m: this.connectTypeObj.value,
          n: this.n
        }
      })
    },
    /** 生成分享链接 */
    creShareUrl() {
      if (!this.roomname && this.roompwd) {
        this.$notify.error({
          title: '提示',
          message: '请输入会议房间'
        })
        return false
      }
      if (this.roomname && !this.roompwd) {
        this.$notify.error({
          title: '提示',
          message: '请输入会议密码'
        })
        return false
      }
      !this.roomname && !this.roompwd && this.creMeetingRoom()
      this.h = this.h || this.$Creid(this.roomname, this.roompwd)
      this.$store.commit('setMeetingID', this.h)
      if (this.resetShareStatus) {
        this.h = this.$Creid(this.roomname, this.roompwd)
        this.getShareUrl(this.meetingType)
        this.resetShareStatus = false
      }
      this.shareStatus = true
    },
    /** 生成会议房间 */
    creMeetingRoom () {
      this.roomname = this.$GetRandomString(6)
      this.roompwd = this.$GetRandomString(6)
      this.resetShareStatus = true
    },
    /** 选择语音或者视频通话 */
    chooseMeetingType (type, index)  {
      if (type == 'live') {
        window.open('https://open.umnet.cn/dapp/dappLink?appid=915efde97e151f5e1eba44a545934f79&modid=7f3f2ba6b45f9494a3cc39d68c974e4f')
        return
      }
      this.resetShareStatus = true
      this.meetingIndex = index
      this.meetingType = type
      this.$store.commit('setMeetingType', type)
      this.shareStatus && this.getShareUrl(type)
    },
    /** 获取分享的url */
    getShareUrl (type) {
      let newurl = location.href.split('?')[0]
      this.tokenModel = `${newurl}?h=${this.h}&t=${type}&m=${this.connectTypeObj.value}`
      this.pwdJoinModel = `${newurl}?roomid=${this.roomname}&t=${type}&m=${this.connectTypeObj.value}`
    },
    /** 重置分享的url */
    resetShareUrl () {
      this.resetShareStatus = true
    }
  },
};
</script>

<style lang="scss" scoped>
.index_box {
  width: 100%;
  height: 100%;
  background: url('../../assets/img/index_bgi.png') 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.enter {
  padding: 20px 0;
  width: 40%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  .help_box {
    display: flex;
    justify-content: flex-end;
    li {
      display: flex;
      align-items: center;
      margin-right: 20px;
      cursor: pointer;
      img {
        width: 16px;
        height: 16px;
        margin-right: 7px;
      }
      span {
        font-size: 14px;
        color: #4D4D4D;
      }
    }
  }
  .title{
    font-weight: 400;
    font-size: 30px;
    text-align: center;
    color: #000000;
    margin-top: 10px;
  }
  .metting_type_box {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    li {
      font-size: 20px;
      color: #999;
      margin-right: 25px;
      cursor: pointer;
    }
    li:last-child {
      margin-right: 0;
    }
    .active {
      color: #2E9CF1;
      font-weight: bold;
    }
  }
  .input_box {
    margin-top: 20px;
    div {
      display: flex;
      align-items: center;
      span {
        width: 100px;
        text-align: right;
      }
      input {
        border-radius: 5px;
        border: 1px solid #DCDFE6;
        width: 77%;
        display: block;
        padding: 10px;
        color: #999999;
        background-color: #fff;
        text-align: left;
      }
      input::-webkit-input-placeholder {
        color: #BFBFBF;
      }
      input:-moz-placeholder {
        color: #BFBFBF;
      }
      input:-ms-input-placeholder {
        color: #BFBFBF;
      }
      .pwd_input {
        width: calc(77% - 30px);
      }
      img {
        width: 12px;
        height: 16px;
        margin-left: 13px;
        cursor: pointer;
      }
    }
    div:last-child {
      margin-top: 20px;
    }
  }
  .radioBox{
    color: #333;
    margin: 0 auto;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }
  .join_box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    .join_btn{
      width: 200px;
      height: 40px;
      background: #2E9CF1;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      text-align: center;
    }
  }
  .mask_slot_box {
    padding: 20px 0;
    .slot_title {
      color: #333;
      font-size: 16px;
    }
  }
  .create_box{
    width: 100%;
    margin-top: 20px;
    text-align: center;
    .cre_span {
      color: #3B78E7;
      cursor: pointer;
    }
  }
  .default_url_box {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    .btm_url {
      color: #333;
    }
    .btm_url:hover {
      color: #2e9cf1;
    }
  }
  .definition{
    text-align: center;
    margin-top: 20px;
    span {
      width: 100px;
      text-align: right;
    }
    label {
      margin-right: 20px;
    }
  }
  .help_center {
    text-align: center;
    margin-top: 20px;
  }
  /deep/ .el-radio__label{
    font-size: 15px;
  }
  /deep/ .el-radio-group {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 222px;
    div {
      margin-top: 5px;
    }
  }
  .mask_slot_btnbox {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
.btm_tip {
  font-size: 30px;
  color: #FFFFFF;
  text-align: center;
  margin-top: 45px;
}

/** 手机端样式 */
.phone_enter {
  width: 90%;
  .metting_type_box {
    margin-top: 20px;
    li {
      font-size: 15px;
    }
  }
  .input_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    div {
      width: 100%;
      justify-content: center;
      span {
        width: 20%;
      }
      input {
        width: 60%;
      }
      .pwd_input {
        width: calc(60% - 30px);
      }
    }
  }
  /deep/ .el-radio-group {
    max-width: none;
  }
  .definition  {
    span {
      width: 41%;
    }
    label {
      margin-right: 10px;
    }
  }
}
.phone_btn_tip {
  font-size: 18px;
  margin-top: 10px;
}
</style>
